@media screen and (max-width: 601px) {
  #passport-app {
    .role-box {
      width: 400px;
    }

    .animation-nav-box .button-box {
      width: 100px;
    }

    .animation-nav-box .center-box {
      height: 40px;
    }

    .animation-button {
      width: 100px;
      height: 40px;
      line-height: 40px;
      font-size: 11px;
    }

    .container-form {
      width: 170px;
      padding-bottom: 60px;
    }

    .input-verifycode-box {
      text-align: center;
      flex-wrap: wrap;
      justify-content: center;
    }

    .input-verifycode-box .btn-get-verifycode {
      width: 100%;
      border-radius: 4px;
      margin: 0;
    }

    .role-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 100vh;
      z-index: -1;

      .phone-role {
        display: inline-block;
        height: 100%;
        width: initial;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
      }
    }

    .role-box img {
      display: none;
    }

    .animation-button .other-item::before,
    .animation-button .other-item::after {
      height: 50%;
      border-width: 2px;
    }

    .animation-button::before,
    .animation-button::after {
      height: 30%;
      border-width: 2px;
    }
    
    .c-reset-password .u-title{
      transform: translateX(70px) rotateZ(-10deg) skewY(-10deg);
    }
  }
}